<template>
	<view class="carditem barcard">
		<view class="title u-flex-y-center">
			考勤统计
		</view>
		<view class="cqlist u-flex-x-center">
			<view class="cqitem u-flex-x-center">
				<view class="image u-flex-y-center">
					<u--image :showLoading="true" :src="cq" width="32rpx" height="32rpx"></u--image>
				</view>
				<view class="text">
					<view class="text1">
						今日出勤
					</view>
					<view class="text2">
					{{num}}人
					</view>
				</view>
			</view>

			<view class="cqitem u-flex-x-center">
				<view class="image u-flex-y-center">
					<u--image :showLoading="true" :src="cql" width="32rpx" height="32rpx"></u--image>
				</view>
				<view class="text">
					<view class="text1">
						今日出勤率
					</view>
					<view class="text2">
						{{ratio}}%
					</view>
				</view>
			</view>

		</view>
		<view style="height: 630rpx">
			<l-echart ref="chartRef" @finished="echartinit"></l-echart>
		</view>
	</view>
</template>

<script>
	import cq from "@/static/xmxq/bar/cq.png";
	import cql from "@/static/xmxq/bar/cql.png";
	import * as echarts from "@/uni_modules/lime-echart/static/echarts.min";
	import {getAttendanceStatic,getOnlineWorkerStatic} from "@/api/index";
	export default {
		components: {},
		data() {
			return {
				cq,
				cql,
				num:0,
				ratio:0,
				projectId:''
			};
		},
		// 页面加载时启动滚动
		mounted() {

		},

		// 页面卸载时清除定时器
		onUnload() {
			this.stopScroll();
		},
		methods: {
			async init(projectId) {
				this.projectId=projectId
				let res = await getAttendanceStatic({
					projectId: projectId
				})
				this.num=res.data.num
				this.ratio=res.data.ratio
				
			},
			async echartinit() {
				let {data} = await getOnlineWorkerStatic({
					projectId: this.projectId
				})
				
				let option = {
					title: {
						text: '今日在线人数统计',
						left: 'center',
						top: '22px', // 调整标题位置更靠近顶部
						textStyle: {
							color: '#fff',
							fontSize: 14
						}
					},
					legend: { // 添加右侧图例
						data: ['在线人数'],
						right: '24px',
						top: '57px', // 图例位于标题下方（根据标题高度调整）
						textStyle: {
							color: '#818496', // 与坐标轴文字颜色一致
							fontSize: 12
						}
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: { // 调整图表区域位置
						top: '98px', // 让图表区域下移
						bottom: '30px',
						left: '40px',
						right: '24px' // 给右侧留出图例空间
					},
					xAxis: {
						type: 'category',
						data:data.map(e=>e.time),
						axisLabel: {
							color: '#818496',
							fontSize: 12
						},
						axisLine: {
							lineStyle: {
								color: '#ddd'
							}
						}
					},
					yAxis: {
						type: 'value',
						// minInterval: 1, // 强制 Y 轴刻度间隔为整数
						axisLabel: {
							color: '#818496',
							fontSize: 12
						},
						splitLine: {
							lineStyle: {
								// type: 'dashed',
								color: '#eee'
							}
						},
						axisLine: {
							show: false
						}
					},
					series: [{
						name: '在线人数',
						type: 'bar',
						data: data.map(e=>e.num),
						barWidth: '40%',
						itemStyle: {
							color: new echarts.graphic.LinearGradient( // 水平渐变
								0, 0, 1, 0,
								[{
									offset: 0,
									color: '#43FFFF'
								}, {
									offset: 1,
									color: '#327FC6'
								}]
							),
							// borderRadius: [5, 5, 0, 0]
						},
						label: {
							show: true,
							position: 'top',
							color: '#fff',
							fontSize: 12
						}
					}]
				};
				// chart 图表实例不能存在data里
				const myChart = await this.$refs.chartRef.init(echarts);
				myChart.setOption(option);
			},

		},
	};
</script>

<style lang="scss" scoped>
	.carditem {
		margin: 0 32rpx;
		color: #fff;
		border-radius: 12px;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)),
			rgba(255, 255, 255, 0.08);
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(20px);
		box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
	}

	.barcard {
		.title {
			display: flex;
			align-items: center;
			padding: 0 34rpx;
			height: 120rpx;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 56rpx;
		}

		.cqlist {
			padding: 0 60rpx;
			padding-bottom: 20rpx;

			.cqitem {
				flex: 1;

				.image {
					padding-right: 16rpx;
					height: 40rpx;
				}

				.text {
					.text1 {
						font-size: 24rpx;
						font-weight: 500;
						line-height: 40rpx;
						color: #E5E7EB;
					}

					.text2 {

						font-size: 48rpx;
						font-weight: bold;
						line-height: 64rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>